<!-- 行程详情抽屉 -->
<template>
  <div 
    v-if="modelValue"
    class="fixed inset-0 z-40 overflow-hidden"
    @click="$emit('update:modelValue', false)"
  >
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

      <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
        <div 
          class="relative w-screen max-w-2xl"
          @click.stop
        >
          <div class="h-full flex flex-col bg-white shadow-xl">
            <!-- 头部 -->
            <div class="px-6 py-4 border-b border-gray-200">
              <div class="flex items-start justify-between">
                <h2 class="text-lg font-medium text-gray-900">
                  行程详情
                </h2>
                <button 
                  @click="$emit('update:modelValue', false)"
                  class="text-gray-400 hover:text-gray-500"
                >
                  <font-awesome-icon icon="times" class="text-xl" />
                </button>
              </div>
            </div>

            <!-- 内容区域 -->
            <div class="flex-1 overflow-y-auto">
              <div class="px-6 py-4">
                <!-- 基本信息 -->
                <div class="space-y-6">
                  <div>
                    <h3 class="text-xl font-semibold text-gray-900">{{ trip?.name }}</h3>
                    <p class="mt-1 text-sm text-gray-500">{{ trip?.description }}</p>
                  </div>

                  <div class="flex items-center space-x-4 text-sm">
                    <span class="flex items-center text-gray-600">
                      <font-awesome-icon icon="calendar" class="mr-1" />
                      {{ formatDate(trip?.startDate) }} - {{ formatDate(trip?.endDate) }}
                    </span>
                    <span class="flex items-center text-gray-600">
                      <font-awesome-icon icon="clock" class="mr-1" />
                      {{ trip?.days }}天
                    </span>
                    <StatusTag :status="getTripStatus(trip?.status)" :label="trip?.status" />
                  </div>

                  <!-- 行程安排 -->
                  <div>
                    <h4 class="text-lg font-medium text-gray-900 mb-4">行程安排</h4>
                    <div class="space-y-6">
                      <div 
                        v-for="day in getDaySchedule(trip?.spots)"
                        :key="day.dayNum"
                        class="bg-gray-50 rounded-lg p-4"
                      >
                        <h5 class="text-sm font-medium text-gray-700 mb-3">第 {{ day.dayNum }} 天</h5>
                        <div class="space-y-4">
                          <div 
                            v-for="spot in day.spots"
                            :key="spot.id"
                            class="flex items-center"
                          >
                            <img 
                              :src="spot.imageUrl"
                              :alt="spot.name"
                              class="w-16 h-16 rounded-lg object-cover"
                            />
                            <div class="ml-4">
                              <h6 class="text-sm font-medium text-gray-900">{{ spot.name }}</h6>
                              <p class="text-xs text-gray-500">预计游览时间：2小时</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 底部操作栏 -->
            <div class="flex justify-end px-6 py-4 border-t border-gray-200">
              <button
                @click="handleEdit"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
              >
                编辑行程
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import StatusTag from './StatusTag.vue'

const props = defineProps<{
  modelValue: boolean
  trip?: any
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'edit', trip: any): void
}>()

// 工具函数
const formatDate = (dateString?: string): string => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit'
  })
}

const getTripStatus = (status?: string): 'active' | 'inactive' | 'pending' | 'blocked' => {
  const statusMap: Record<string, 'active' | 'inactive' | 'pending' | 'blocked'> = {
    '已确定': 'active',
    '规划中': 'pending',
    '进行中': 'active',
    '已完成': 'inactive',
    '已取消': 'blocked'
  }
  return statusMap[status || ''] || 'inactive'
}

const getDaySchedule = (spots?: any[]) => {
  if (!spots) return []
  
  const days = []
  const spotsPerDay = 3
  
  for (let i = 0; i < spots.length; i += spotsPerDay) {
    days.push({
      dayNum: Math.floor(i / spotsPerDay) + 1,
      spots: spots.slice(i, i + spotsPerDay)
    })
  }
  
  return days
}

// 操作方法
const handleEdit = () => {
  emit('edit', props.trip)
  emit('update:modelValue', false)
}
</script> 